<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag !== 0" class="loading">Loading...</dv-loading>
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="view-frame">
        <div class="up">
          <div class="left">
            <div class="elec-trend">
              <div class="elec-trend-title">设备运行台数</div>
            </div>
            <div v-for="(item, index) in countData" :key="index" class="cda">
              <div class="title">{{ item && item.name ? item.name : "-" }}</div>
              <div class="count">
                <div class="count_item">
                  <div class="text">
                    {{
                      item && item.state && item.state[0] ? item.state[0] : "-"
                    }}
                  </div>
                  <div class="number1">
                    {{
                      item && item.num && item.num[0]
                        ? parseInt(item.num[0] / 10)
                        : 0
                    }}
                  </div>
                  <div class="number2">
                    {{
                      item && item.num && item.num[0]
                        ? parseInt(item.num[0] % 10)
                        : 0
                    }}
                  </div>
                </div>
                <div class="count_item">
                  <div class="text">
                    {{ item && item.state[1] ? item.state[1] : "-" }}
                  </div>
                  <div class="number1">
                    {{
                      item && item.num && item.num[1]
                        ? parseInt(item.num[1] / 10)
                        : 0
                    }}
                  </div>
                  <div class="number2">
                    {{
                      item && item.num && item.num[1]
                        ? parseInt(item.num[1] % 10)
                        : 0
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="center">
            <div class="trans_rate">
              <div class="value">{{ showData.rate }}</div>
              <div class="unit">实时转化率（m³/kWh）</div>
            </div>
            <div class="elecL">
              <div class="value">{{ showData.lcdaC }}</div>
              <div class="unit">LCDA日用电量（kWh）</div>
            </div>
            <div class="elecH">
              <div class="value">{{ showData.hcdaC }}</div>
              <div class="unit">HCDA日用电量（kWh）</div>
            </div>
            <div class="gasL">
              <div class="value">{{ showData.lcdaQW }}</div>
              <div class="unit">LCDA日送气量（m³）</div>
            </div>
            <div class="gasH">
              <div class="value">{{ showData.hcdaQW }}</div>
              <div class="unit">HCDA日送气量（m³）</div>
            </div>
          </div>
          <div class="right">
            <div class="elec-trend">
              <div class="elec-trend-title">历史压力</div>
            </div>
            <div class="chart_frame">
              <vechart :options="ipOptions" />
            </div>
          </div>
        </div>
        <div class="down">
          <div class="charts">
            <div class="elec-trend">
              <div class="elec-trend-title">历史流量</div>
            </div>
            <div class="chart_frame">
              <vechart :options="icOptions" />
            </div>
          </div>
          <div class="charts">
            <div class="elec-trend">
              <div class="elec-trend-title">历史转化率</div>
            </div>
            <div class="chart_frame">
              <vechart :options="rateOptions" />
            </div>
          </div>
          <div class="charts">
            <div class="elec-trend">
              <div class="elec-trend-title">历史用电量</div>
            </div>
            <div class="chart_frame">
              <vechart :options="cOptions" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
Object.assign(Date.prototype, {
  switch(time) {
    const date = {
      yy: this.getFullYear(),
      MM: this.getMonth() + 1,
      dd: this.getDate(),
      hh: this.getHours(),
      mm: this.getMinutes(),
      ss: this.getSeconds(),
    };
    if (/(y+)/i.test(time)) {
      time = time.replace(
        RegExp.$1,
        (this.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    }
    Object.keys(date).forEach(function (i) {
      if (new RegExp("(" + i + ")").test(time)) {
        if (RegExp.$1.length === 2) {
          date[i] < 10 ? (date[i] = "0" + date[i]) : date[i];
        }
        time = time.replace(RegExp.$1, date[i]);
      }
    });
    return time;
  },
});
import barcharts from "./json/barcharts.json";
import areacharts from "./json/areacharts.json";
import linecharts from "./json/linecharts.json";
import scattercharts from "./json/scatterOptions.json";
import { mapState } from "vuex";
export default {
  components: {
    MainTitle: () => import("@/components/MainTitle.vue"),
    vechart: () => import("@components/charts/Vechart.vue"),
  },

  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      runFlag: 0,
      barcharts: barcharts,
      areacharts: areacharts,
      linecharts: linecharts,
      scattercharts: scattercharts,
      countData: [],
      icData: [],
      ipData: [],
      cData: [],
      showData: {
        hcdaC: "-",
        lcdaC: "-",
        hcdaQW: "-",
        lcdaQW: "-",
        rate: "-",
      },
      pData: [],
      edata: {
        value: 0,
      },
    };
  },
  computed: {
    mainTitle() {
      return this.title;
    },
    ...mapState({
      service: (state) => state.service,
      webModel: (state) => state.authentication.webModel,
      treeTemplate: (state) => state.component.treeTemplate,
    }),

    icOptions() {
      if (this.icData.length) {
        const hcda = this.icData.find((e) => e.id === "hcda");
        const lcda = this.icData.find((e) => e.id === "lcda");

        hcda.value = this.numtoFiexd(hcda.value);
        lcda.value = this.numtoFiexd(lcda.value);
        if (hcda && lcda && hcda.time) {
          const formatter = function (value, index) {
            return new Date(Date.parse(value)).switch("MM月dd日");
          };
          return {
            ...this.areacharts,
            xAxis: {
              ...this.areacharts.xAxis,
              data: hcda.time,
              axisLabel: {
                ...this.areacharts.xAxis.axisLabel,
                formatter: formatter,
              },
            },
            series: [
              { ...this.areacharts.series[0], data: hcda.value },
              { ...this.areacharts.series[1], data: lcda.value },
            ],
          };
        } else {
          return this.areacharts;
        }
      } else {
        return this.areacharts;
      }
    },

    ipOptions() {
      if (this.ipData.length) {
        const hcda = this.ipData.find((e) => e.id === "hcda");
        const lcda = this.ipData.find((e) => e.id === "lcda");
        hcda.value = this.numtoFiexd(hcda.value);
        lcda.value = this.numtoFiexd(lcda.value);

        if (hcda && lcda && hcda.time) {
          const arr1 = [];
          hcda.time.forEach((item, index) => {
            const i = [hcda.time[index], hcda.value[index]];
            arr1.push(i);
          });
          const arr2 = [];
          lcda.time.forEach((item, index) => {
            const i = [lcda.time[index], lcda.value[index]];
            arr2.push(i);
          });
          const formatter = function (value, index) {
            return new Date(Date.parse(value)).switch("MM月dd日");
          };
          return {
            ...this.scattercharts,
            xAxis: {
              ...this.scattercharts.xAxis,
              axisLabel: {
                ...this.scattercharts.xAxis.axisLabel,
                formatter: formatter,
              },
            },
            series: [
              { ...this.scattercharts.series[0], data: arr1 },
              { ...this.scattercharts.series[1], data: arr2 },
            ],
          };
        } else {
          return this.scattercharts;
        }
      } else {
        return this.scattercharts;
      }
    },
    cOptions() {
      if (this.cData.length) {
        const hcda = this.cData.find((e) => e.energy_id === "hcda");
        const lcda = this.cData.find((e) => e.energy_id === "lcda");
        if (hcda && lcda && hcda.time) {
          const formatter = function (value, index) {
            return new Date(Date.parse(value)).switch("MM月dd日");
          };
          return {
            ...this.barcharts,
            xAxis: {
              ...this.barcharts.xAxis,
              data: hcda.time,
              axisLabel: {
                ...this.barcharts.xAxis.axisLabel,
                formatter: formatter,
              },
            },
            series: [
              { ...this.barcharts.series[0], data: hcda.value },
              { ...this.barcharts.series[1], data: lcda.value },
            ],
          };
        } else {
          return this.barcharts;
        }
      } else {
        return this.barcharts;
      }
    },
    rateOptions() {
      console.log("asdassd", this.icData);
      if (this.icData.length && this.pData.length) {
        const hcdaIC = this.icData.find((e) => e.id === "hcda");
        const lcdaIC = this.icData.find((e) => e.id === "lcda");

        const hcdaP = this.pData.find((e) => e.id === "hcda");
        const lcdaP = this.pData.find((e) => e.id === "lcda");

        if (hcdaIC && lcdaIC && hcdaP && lcdaP) {
          const arr1 = [];
          hcdaIC.time.forEach((item, index) => {
            let i;
            if (hcdaP.value[index] === 0) {
              i = 0;
            } else {
              i = (hcdaIC.value[index] / hcdaP.value[index]).toFixed(2);
            }
            arr1.push(i);
          });
          const arr2 = [];
          lcdaIC.time.forEach((item, index) => {
            let i;
            if (lcdaP.value[index] === 0) {
              i = 0;
            } else {
              i = (lcdaIC.value[index] / lcdaP.value[index]).toFixed(2);
            }
            arr2.push(i);
          });
          const formatter = function (value, index) {
            return new Date(Date.parse(value)).switch("MM月dd日");
          };
          return {
            ...this.linecharts,
            xAxis: {
              ...this.linecharts.xAxis,
              data: hcdaIC.time,
              axisLabel: {
                ...this.linecharts.xAxis.axisLabel,
                formatter: formatter,
              },
            },
            series: [
              { ...this.linecharts.series[0], data: arr1 },
              { ...this.linecharts.series[1], data: arr2 },
            ],
          };
        } else {
          return this.linecharts;
        }
      } else {
        return this.linecharts;
      }
    },
  },
  created() {
    this.init();
    setInterval(() => {
      // that.runFlag = 0;
      window.location.reload();
    }, 36000000);
  },
  methods: {
    async init() {
      this.getCdaSystemRunStateData();
      this.getCdaSystemLast7DayIpic();
      this.getCDALast7DayC();
      this.getCdaSystemComputedQwc();
      this.getCdaSystemLast7dayP(); //3220方法
    },

    async getCdaSystemRunStateData() {
      this.runFlag = 1;
      const result = await this.service.getCdaSystemRunStateData();
      if (!result || !result.data) {
        this.$notify({
          title: "系统运行状态数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.countData = result.data;
      this.runFlag = 0;
    },
    async getCdaSystemLast7DayIpic() {
      this.runFlag = 1;
      const result = await this.service.searchCDALast7day();
      // console.log(result, "历史转化");

      if (!result || !result.data) {
        this.$notify({
          title: "送气流量数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.icData = result.data.filter((e) => e.tagId === "ic");
      this.ipData = result.data.filter((e) => e.tagId === "ip");
      this.runFlag = 0;
    },
    async getCDALast7DayC() {
      this.runFlag = 1;
      const result = await this.service.getCDALast7DayC();
      if (!result || !result.data) {
        this.$notify({
          title: "耗电数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.cData = result.data;
      this.runFlag = 0;
    },
    async getCdaSystemComputedQwc() {
      this.runFlag = 1;
      const result4 = await this.service.getCdaSystemComputedQwc();
      if (!result4 || !result4.data) {
        this.$notify({
          title: "累计用电量数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      const result5 = await this.service.getCdaSystemCurrentIcp();
      // console.log(result5, "接收数据");

      if (!result5 || !result5.data) {
        this.$notify({
          title: "送气流量数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.runFlag = 0;
      // console.log(result4, "接收数据111111111111");
      result4.data.find((item) => {
        item.value = item.value.toString().toLocaleString();
        // console.log(item.value);
      });
      // console.log(result4.data, "接收数据222222222");
      // console.log(result5.data, "接收数据222222222");
      this.showData.hcdaC = result4.data.find(
        (e) => e.machine_id === "hcda" && e.tag_id === "c"
      ).value;
      this.showData.lcdaC = result4.data.find(
        (e) => e.machine_id === "lcda" && e.tag_id == "c"
      ).value;

      this.showData.hcdaQW = result4.data.find(
        (e) => e.machine_id === "hcda" && e.tag_id === "qw"
      ).value;
      this.showData.lcdaQW = result4.data.find(
        (e) => e.machine_id === "lcda" && e.tag_id === "qw"
      ).value;
      // console.log(this.showData, "实施转化率");
      this.showData.rate = (
        result5.data.find((e) => e.tag_id === "qw").value /
        result5.data.find((e) => e.tag_id === "c").value
      ).toFixed(2);
      
      // console.log(this.showData.rate, "自定义数据");
    },
    async getCdaSystemLast7dayP() {
      this.runFlag = 1;
      // const result = await this.service.getCdaSystemLast7dayP();
      const result = await this.service.searchCDA3220P();
      // console.log(result, "ok");
      if (!result || !result.data) {
        this.$notify({
          title: "耗电量数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.pData = result.data;
      this.runFlag = 0;
    },
    //封装 保留小数
    numtoFiexd(arr) {
      for (var i = 0; i < arr.length; i++) {
        arr[i] = Math.floor(arr[i] * 100) / 100;
      }
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped>
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
.mainbody {
  height: 100vh;
  background: url("~@assets/report/bg.png") no-repeat;
  background-size: 100% 100%;
}
.container {
  position: relative;
  width: 92%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.view-frame {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  height: 89%;
  overflow-y: scroll;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    // 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {
    // 兼容Opera
    display: none;
  }
  scrollbar-width: none; // 兼容Firefox
  -ms-overflow-style: none; // 兼容edge
}
.elec-trend {
  width: 100%;
  display: flex;
  flex-basis: 10%;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  margin: 1rem 0;
}
.elec-trend-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 3rem;
}
.up {
  flex-basis: 55%;
  display: flex;
}
.left,
.right {
  flex-basis: 25%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.center {
  flex-basis: 50%;
  height: 100%;
  background: url("~@assets/report/fangkuai.png") no-repeat center center;
  background-size: 80% auto;
  position: relative;
}
.down {
  flex-basis: 45%;
  display: flex;
  justify-content: space-between;
}
.cda {
  flex-basis: 45%;
  padding: 7% 0;
  display: flex;
  flex-flow: column;
}
.title {
  font-size: 1.6rem;
  font-weight: 600;
  flex-basis: 25%;
}
.count {
  display: flex;
  justify-content: space-between;
  flex-basis: 75%;
}
.count_item {
  display: flex;
  align-items: center;
  flex-basis: 50%;
}
.text {
  font-size: 1.4rem;
  color: #00f4ff;
  font-weight: 600;
  margin-right: 1rem;
}
.number1,
.number2 {
  height: 100%;
  width: 25%;
  background: url("~@assets/report/number-bg.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 600;
}
.center > div {
  height: 27%;
  min-width: 20%;
  position: absolute;
  background: url("~@assets/report/under.gif") no-repeat center bottom;
  background-size: 100% auto;
}
.center .value {
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 2.8rem;
  text-align: center;
}
.center .unit {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2.5rem;
  text-align: center;
}
.center .trans_rate {
  height: 40%;
  top: 10%;
  left: 40%;
  background: url("~@assets/report/fangfangkuai.gif") no-repeat center bottom;
  background-size: 100% auto;
}
.elecL {
  left: 0%;
  top: 30%;
}
.elecH {
  right: 0%;
  top: 30%;
}
.gasL {
  left: 20%;
  top: 60%;
}
.gasH {
  right: 20%;
  top: 60%;
}
.chart_frame {
  flex-basis: 90%;
  width: 100%;
}
.charts {
  flex: 1;
  height: 100%;
  display: flex;
  flex-flow: column;
}
</style>
